<template>
	<view>

		<!-- 页首 -->
		<zw-header></zw-header>

		<!-- 商品类别及轮播图 -->
		<hero></hero>

		<!-- 相关通道及推荐海报 -->
		<hero-sub></hero-sub>

		<!-- 右侧工具栏 -->
		<tool-bar :scrollTop="scrollTop"></tool-bar>

		<!-- 闪购 -->
		<flash-sale></flash-sale>

		<block v-for="(item, index) in 7" :key="index">
			<!-- 横幅 -->
			<banner :banner="bannerConfig[index]"></banner>
			<!-- 商品类别下的商品展示 -->
			<brick v-if="index < 7" :category="brickConfig[index]"></brick>
		</block>

		<!-- 视频展示 -->
		<video-box></video-box>

		<!-- 页脚 -->
		<zw-footer></zw-footer>

	</view>
</template>

<script>
	import hero from '@/components/home/hero.vue';
	import heroSub from '@/components/home/hero-sub.vue';
	import toolBar from '@/components/home/tool-bar.vue';
	import flashSale from '@/components/home/flash-sale.vue';
	import banner from '@/components/home/banner.vue';
	import brick from '@/components/home/brick.vue';
	import videoBox from '@/components/home/video-box.vue';

	import bannerConfig from '@/common/config/home/banner.config.js';
	import brickConfig from '@/common/config/home/brick.config.js';

	import LazyLoad from '@/common/tools/lazyload.js';

	// 从网页代码里匹配商品数据
	// const titles = htmlText.match(/class="title"([^<]*)/g).map(e => e.match(/>\n[^\n]*/)[0].replace(/>\n[^\s)*]|[(\s$)*]/, ''));
	// const names = htmlText.match(/class="text"[^<]*/g).map(e => e.replace(/class="text">/, ''));
	// const thumbUrls = htmlText.match(/<img[\s]+(\S[^>]+)>/g).map(e => 'https:' + e.match(/\/\/[^"]+/)[0]);

	export default {
		components: {
			hero,
			heroSub,
			toolBar,
			flashSale,
			banner,
			brick,
			videoBox
		},
		data() {
			return {
				scrollTop: 0,
				bannerConfig,
				brickConfig
			}
		},
		onReady() {
			new LazyLoad('img');
		},
		onShow() {
			// 监听滚动
			window.addEventListener('scroll', this.onScroll, false);
		},
		onHide() {
			// 取消滚动监听
			window.removeEventListener('scroll', this.onScroll, false);
		},
		methods: {
			/**
			 * 解决onPageScroll有时不触发的问题
			 */
			onScroll() {
				this.scrollTop = window.scrollY;
			}
		}
	}
</script>
